<template>
	<div class='modal-dialog'>
		<div class='modal-content'>
			<div class='modal-header'>
				<span class='modal-title'>修改昵称</span>
				<span class="icon-close-model" @click="closeModel"></span>
			</div>
			<div class='modal-body'>
				<input type='text' placeholder='请输入昵称' value='食客123' />
			</div>
			<div class='modal-foot'>
				<button class='amend'>修改</button>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
			}
		},
		mounted() {

		},
		methods:{
			closeModel(){
				this.$emit("hideChangeName",false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.modal-dialog {
		display: flex;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.5);
		padding: 0 40px;
		position: fixed;
		z-index: 500;
		top: 0;
		left: 0;
		.modal-content {
			width: 100%;
			background-color: #fff;
			box-shadow: 0 40px 40px 0 rgba(0, 0, 0, 0.08);
			border-radius: 8px;
			.modal-header {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30px 40px 30px 60px;
				.modal-title {
					font-size: 40px;
					color: #4a4a4a;
					line-height: 56px;
				}
				.icon-close-model {
					display: inline-block;
					width: 39px;
					height: 39px;
					background-size: 100% 100%;
					background-image: url(http://47.98.119.130/test/yami/Pupupclose.png);
				}
			}
			.modal-body {
				padding: 0 60px;
				margin-bottom: 60px;
				input {
					line-height: 42px;
					padding: 0 0 24px 0;
					color: #c4c4c4;
					font-size: 30px;
					box-shadow: 0 1px 0 0 #e5e5e5;
					border: none;
				}
			}
			.modal-foot {
				padding: 0 60px 60px;
				.amend {
					width: 100%;
					height: 88px;
					color: #fff;
					font-size: 30px;
					border-radius: 8px;
					background-image: linear-gradient(-180deg, #F64565 0%, #EF364E 100%);
					box-shadow: 0 10px 10px 0 rgba(244, 63, 92, 0.15);
					border: none;
				}
			}
		}
	}
</style>